<template>
  <view class="container">
    <!-- 自定义顶部导航栏 -->
    <view class="custom-nav-bar">
      <!-- <text class="nav-bar-title">球场地图</text> -->
       <image
        src="../../static/tab/logo.png"
        style="width: 270rpx;height: 68rpx;"
        mode="widthFix"
        class="nav-bar-image"
       />
    </view>
    <view class="content">
      <!-- 腾讯地图 -->
      <map 
        class="map-container"
        :latitude="mapLatitude"
        :longitude="mapLongitude"
        :scale="mapScale"
        :markers="markers"
        :show-location="true"
        :enable-traffic="false"
        :enable-compass="true"
        :enable-3D="true"
        marker-class="marker-transition"
        @markertap="onMarkerTap"
        @regionchange="onRegionChange"
      ></map>
      
      <!-- 地图控制按钮 -->
      <view class="map-controls">
        <!-- <view class="control-btn" @click="locateUser">
          <text class="control-icon">📍</text>
        </view> -->
        <view class="control-btn" @click="zoomIn">
          <text class="control-icon">+</text>
        </view>
        <view class="control-btn" @click="zoomOut">
          <text class="control-icon">-</text>
        </view>
      </view>
      
      <!-- 顶部信息面板 - 液态玻璃效果 -->
      <view class="top-info-panel" v-if="showCourtInfo">
        <view class="panel-content">
          <view class="panel-header">
            <text class="panel-title">{{ selectedCourt.name }}</text>
            <text class="panel-close" @click="closeCourtInfo">×</text>
          </view>
          <view class="panel-body">
            <view class="info-row">
              <view class="info-icon location-icon"></view>
              <text class="info-text">{{ selectedCourt.address }}</text>
            </view>
            <view class="info-row">
              <view class="info-icon description-icon"></view>
              <text class="info-text">{{ selectedCourt.description }}</text>
            </view>
            <!-- <view class="info-row" v-if="selectedCourt.phone">
              <view class="info-icon phone-icon"></view>
              <text class="info-text">{{ selectedCourt.phone }}</text>
            </view> -->
            <!-- 导航按钮 -->
            <view class="navigation-section">
              <view class="nav-button" style="flex: 1;margin-right: 20rpx;" @click="startNavigation">
                <text class="nav-text" style="color: #fff;font-size: 28rpx;">导航</text>
              </view>
              <view class="nav-button" style="background-color: #FFC300;" @click="gotoOrder">
                <text class="nav-text" style="color: #fff;font-size: 28rpx;">去订场</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 液态玻璃效果底部导航栏 -->
    <!-- <LiquidGlassNav :current-tab="currentTab" @tab-change="switchTab" /> -->
  </view>
</template>

<script>
import venueConfig from '@/common/venueConfig.json'
import smallVenueConfig from '@/common/smallVenueConfig.json'
import LiquidGlassNav from '@/components/LiquidGlassNav.vue'

export default {
  components: {
    LiquidGlassNav
  },
  data() {
    return {
      currentTab: 'court', // 当前选中的标签
      // 地图相关数据
      mapLatitude: Number(23.02067), // 默认纬度（向阳彩鸿湾）
      mapLongitude: Number(113.75179), // 默认经度（向阳彩鸿湾）
      mapScale: 12, // 地图缩放级别
      markers: [], // 地图标记点
      showCourtInfo: false, // 是否显示球场信息弹窗
      selectedCourt: null, // 选中的球场信息
      selectedMarkerId: null, // 当前选中的标记点ID
      normalMarkerSize: { width: 46, height: 46 }, // 正常标记点大小
      enlargedMarkerSize: { width: 69, height: 69 } // 放大后标记点大小
    }
  },
  onLoad() {
    // 从缓存中加载数据
    this.loadCachedData();
    // 初始化地图
    this.initMap();
  },
  
  onShow() {
    // 页面显示时，从缓存中恢复数据
    this.loadCachedData();
    // 检查当前页面路径，确保导航栏选中状态正确
    this.checkCurrentPagePath();
  },
  
  onPullDownRefresh() {
    // 禁用下拉刷新
    uni.stopPullDownRefresh();
  },
  methods: {
    // 加载缓存数据
    loadCachedData() {
      try {
        const cachedData = uni.getStorageSync('courtPageData');
        if (cachedData) {
          // 恢复页面数据
          this.currentTab = cachedData.currentTab || 'court';
          // 这里可以添加更多需要缓存的数据
        }
      } catch (error) {
        console.error('加载缓存数据失败:', error);
      }
    },
    
    // 保存数据到缓存
    saveDataToCache() {
      try {
        const dataToCache = {
          currentTab: this.currentTab,
          // 这里可以添加更多需要缓存的数据
        };
        uni.setStorageSync('courtPageData', dataToCache);
      } catch (error) {
        console.error('保存数据到缓存失败:', error);
      }
    },
    
    // 刷新数据并更新缓存
    async refreshData() {
      try {
        // 重新加载地图数据
        this.initMap();
        this.saveDataToCache();
      } catch (error) {
        console.error('刷新数据失败:', error);
      } finally {
        uni.stopPullDownRefresh();
      }
    },
    
    // 检查当前页面路径，确保导航栏选中状态正确
    checkCurrentPagePath() {
      try {
        // 获取当前页面路径
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1];
        const currentRoute = currentPage.route;
        
        // 根据页面路径设置正确的导航栏选中状态
        if (currentRoute === 'pages/index/index') {
          this.currentTab = 'home';
        } else if (currentRoute === 'pages/court/court') {
          this.currentTab = 'court';
        } else if (currentRoute === 'pages/mine/mine') {
          this.currentTab = 'mine';
        }
        
        console.log('当前页面路径:', currentRoute, '导航栏选中状态:', this.currentTab);
      } catch (error) {
        console.error('检查页面路径失败:', error);
      }
    },
    
    // 切换底部导航栏
    switchTab(tab) {
      this.currentTab = tab;
      // 保存当前页面数据到缓存
      this.saveDataToCache();
      switch(tab) {
        case 'home':
          uni.redirectTo({
            url: '/pages/index/index'
          });
          break;
        case 'court':
          // 当前已经是球场页面，不需要跳转
          break;
        case 'mine':
          uni.redirectTo({
            url: '/pages/mine/mine'
          });
          break;
      }
    },
    
    // 初始化地图
    initMap() {
      this.loadCourtMarkers();
      this.getUserLocation();
    },
    
    // 加载球场标记点
    loadCourtMarkers() {
      const markers = [];
      const venueTypes = {
        '库卡网球': { color: '#4CAF50', icon: '🎾' },
        '向阳彩鸿湾': { color: '#FF5722', icon: '🏟️' },
        '向阳康帝校区': { color: '#2196F3', icon: '🏸' },
        '向阳雅园校区': { color: '#9C27B0', icon: '🏫' },
        '向阳33小镇校区': { color: '#FF9800', icon: '🏘️' },
        '向阳星河城校区': { color: '#795548', icon: '🏢' },
        '向阳振兴城校区': { color: '#607D8B', icon: '🏗️' },
        '拓德网球俱乐部': { color: '#E91E63', icon: '🎯' },
        '爱动金丰网球俱乐部': { color: '#3F51B5', icon: '🏆' },
        '卓乐网球': { color: '#009688', icon: '🎪' },
        '爱力网球': { color: '#8BC34A', icon: '💪' },
        '东城体育公园': { color: '#FFC107', icon: '🏃' },
        '东莞市体育中心': { color: '#00BCD4', icon: '🏟️' },
        '3.5+网球（新基）': { color: '#673AB7', icon: '🎾' },
        '3.5+网球（金色华庭店）': { color: '#673AB7', icon: '🎾' },
        '3.5+网球（福地）': { color: '#673AB7', icon: '🎾' }
      };
      
      console.log('开始加载球场标记点，场馆数据:', venueConfig.venues);
      console.log('开始加载小球场标记点，小场馆数据:', smallVenueConfig.venues);
      
      let markerIndex = 0;
      
      // 加载大球场数据
      venueConfig.venues.forEach((venue, venueIndex) => {
        const typeConfig = venueTypes[venue.name] || { color: '#757575', icon: '📍' };
        
        // 遍历每个场馆的地址
        venue.addresses.forEach((address, addressIndex) => {
          // 确保经纬度是数字类型
          const latitude = Number(address.latitude);
          const longitude = Number(address.longitude);
          
          console.log(`场馆 ${venue.name} - 地址 ${addressIndex}: 纬度: ${latitude}, 经度: ${longitude}`);
          
          // 验证经纬度是否有效
          if (isNaN(latitude) || isNaN(longitude)) {
            console.error(`场馆 ${venue.name} 的地址 ${addressIndex} 经纬度数据无效:`, address);
            return; // 跳过无效数据
          }
          
          markers.push({
            id: markerIndex++,
            latitude: latitude,
            longitude: longitude,
            title: venue.name,
            iconPath: '/static/court/court-small.png',
            callout: {
              content: `${venue.name}\n${address.location}\n${venue.phone}`,
              color: '#ffffff',
              fontSize: 12,
              borderRadius: 6,
              bgColor: typeConfig.color,
              padding: 8,
              display: 'BYCLICK'
            },
            width: this.normalMarkerSize.width,
            height: this.normalMarkerSize.height,
            anchor: {
              x: 0.5,
              y: 1
            },
            customCallout: {
              display: 'BYCLICK'
            },
            venueType: 'large' // 标记为大球场
          });
        });
      });
      
      // 加载小球场数据
      smallVenueConfig.venues.forEach((venue, venueIndex) => {
        const typeConfig = { color: '#FF6B35', icon: '🏓' }; // 小球场使用统一的橙色
        
        // 遍历每个场馆的地址
        venue.addresses.forEach((address, addressIndex) => {
          // 确保经纬度是数字类型
          const latitude = Number(address.latitude);
          const longitude = Number(address.longitude);
          
          console.log(`小球场 ${venue.name} - 地址 ${addressIndex}: 纬度: ${latitude}, 经度: ${longitude}`);
          
          // 验证经纬度是否有效
          if (isNaN(latitude) || isNaN(longitude)) {
            console.error(`小球场 ${venue.name} 的地址 ${addressIndex} 经纬度数据无效:`, address);
            return; // 跳过无效数据
          }
          
          markers.push({
            id: markerIndex++,
            latitude: latitude,
            longitude: longitude,
            title: venue.name,
            iconPath: '/static/court/court.png',
            callout: {
              content: `${venue.name}\n${address.address}\n${venue.phone}`,
              color: '#ffffff',
              fontSize: 12,
              borderRadius: 6,
              bgColor: typeConfig.color,
              padding: 8,
              display: 'BYCLICK'
            },
            width: this.normalMarkerSize.width,
            height: this.normalMarkerSize.height,
            anchor: {
              x: 0.5,
              y: 1
            },
            customCallout: {
              display: 'BYCLICK'
            },
            venueType: 'small' // 标记为小球场
          });
        });
      });
      
      console.log('生成的标记点数据:', markers);
      this.markers = markers;
    },
    
    // 获取用户位置
    getUserLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.mapLatitude = res.latitude;
          this.mapLongitude = res.longitude;
        },
        fail: () => {
          console.log('获取用户位置失败，使用默认位置');
        }
      });
    },
    
    // 标记点点击事件
    onMarkerTap(e) {
      const markerId = e.markerId;
      // 如果之前有选中的标记点，将其恢复为正常大小
      if (this.selectedMarkerId !== null) {
        const prevMarkerIndex = this.markers.findIndex(m => m.id === this.selectedMarkerId);
        if (prevMarkerIndex !== -1) {
          this.$set(this.markers[prevMarkerIndex], 'width', this.normalMarkerSize.width);
          this.$set(this.markers[prevMarkerIndex], 'height', this.normalMarkerSize.height);
        }
      }
      
      // 查找对应的场馆信息
      let targetVenue = null;
      let targetAddress = null;
      let venueType = 'large';
      
      // 先在大球场中查找
      for (const venue of venueConfig.venues) {
        for (const address of venue.addresses) {
          // 通过经纬度匹配找到对应的场馆和地址
          if (Number(address.latitude) === this.markers[markerId].latitude && 
              Number(address.longitude) === this.markers[markerId].longitude) {
            targetVenue = venue;
            targetAddress = address;
            venueType = 'large';
            break;
          }
        }
        if (targetVenue) break;
      }
      
      // 如果在大球场中没找到，再在小球场中查找
      if (!targetVenue) {
        for (const venue of smallVenueConfig.venues) {
          for (const address of venue.addresses) {
            // 通过经纬度匹配找到对应的场馆和地址
            if (Number(address.latitude) === this.markers[markerId].latitude && 
                Number(address.longitude) === this.markers[markerId].longitude) {
              targetVenue = venue;
              targetAddress = address;
              venueType = 'small';
              break;
            }
          }
          if (targetVenue) break;
        }
      }
      
      if (targetVenue && targetAddress) {
        // 放大当前点击的标记点
        const currentMarkerIndex = this.markers.findIndex(m => m.id === markerId);
        if (currentMarkerIndex !== -1) {
          this.$set(this.markers[currentMarkerIndex], 'width', this.enlargedMarkerSize.width);
          this.$set(this.markers[currentMarkerIndex], 'height', this.enlargedMarkerSize.height);
          
          // 更新选中的标记点ID
          this.selectedMarkerId = markerId;
        }
        
        this.selectedCourt = {
          name: targetVenue.name,
          address: venueType === 'large' ? targetAddress.address : targetAddress.address,
          description: targetVenue.description,
          phone: targetVenue.phone,
          latitude: targetAddress.latitude,
          longitude: targetAddress.longitude,
          venueType: venueType
        };
        this.showCourtInfo = true;
      }
    },
    
    // 地图区域变化事件
    onRegionChange(e) {
      // 可以在这里处理地图移动、缩放等事件
    },
    
    // 定位用户位置
    locateUser() {
      this.getUserLocation();
    },
    
    // 放大地图
    zoomIn() {
      if (this.mapScale < 20) {
        this.mapScale += 1;
      }
    },
    
    // 缩小地图
    zoomOut() {
      if (this.mapScale > 3) {
        this.mapScale -= 1;
      }
    },
    
    // 关闭球场信息弹窗
    closeCourtInfo() {
      this.showCourtInfo = false;
      this.selectedCourt = null;
      
      // 将选中的标记点恢复为正常大小
      if (this.selectedMarkerId !== null) {
        const markerIndex = this.markers.findIndex(m => m.id === this.selectedMarkerId);
        if (markerIndex !== -1) {
          this.$set(this.markers[markerIndex], 'width', this.normalMarkerSize.width);
          this.$set(this.markers[markerIndex], 'height', this.normalMarkerSize.height);
        }
        this.selectedMarkerId = null;
      }
    },
    
    // 开始导航
    startNavigation() {
      if (this.selectedCourt && this.selectedCourt.address) {
        // 使用uni-app的地图导航功能
        uni.openLocation({
          latitude: this.selectedCourt.latitude || this.mapLatitude,
          longitude: this.selectedCourt.longitude || this.mapLongitude,
          name: this.selectedCourt.name,
          address: this.selectedCourt.address,
          success: () => {
            console.log('导航成功启动');
          },
          fail: (error) => {
            console.error('导航启动失败:', error);
            uni.showToast({
              title: '导航启动失败',
              icon: 'none'
            });
          }
        });
      }
    },
    
    // 跳转到订场小程序
    gotoOrder() {
      if (!this.selectedCourt) {
        uni.showToast({
          title: '请先选择球场',
          icon: 'none'
        });
        return;
      }
      
      // 查找选中球场的appId
      let targetVenue = null;
      let appId = null;
      
      // 先在大球场中查找
      for (const venue of venueConfig.venues) {
        if (venue.name === this.selectedCourt.name) {
          targetVenue = venue;
          appId = venue.appId;
          break;
        }
      }
      
      // 如果在大球场中没找到，再在小球场中查找 
      if (!targetVenue) {
        for (const venue of smallVenueConfig.venues) {
          if (venue.name === this.selectedCourt.name) {
            targetVenue = venue;
            appId = venue.appId;
            break;
          }
        }
      }
      
      if (!appId) {
        uni.showToast({
          title: '该球场暂不支持在线订场',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到对应的小程序
      uni.navigateToMiniProgram({
        appId: appId,
        path: '', // 可以根据需要设置具体的页面路径
        success: () => {
          console.log('成功跳转到小程序:', appId);
        },
        fail: (error) => {
          console.error('跳转小程序失败:', error);
        }
      });
    }
  }
}
</script>

<style>
.container {
  padding: 0;
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  overflow: hidden;
}

.content {
  position: relative;
  width: 100%;
  height: calc(100vh - 88rpx - env(safe-area-inset-top));
  margin-top: calc(88rpx  + env(safe-area-inset-top));
  overflow: hidden;
}

/* 地图容器样式 */
.map-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 地图控制按钮样式 - 液态玻璃效果 */
.map-controls {
  position: absolute;
  right: 20rpx;
  bottom: 260rpx; /* 为底部导航栏留出空间 */
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 15rpx;
  padding: 20rpx;
}

.control-btn {
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 8rpx 24rpx rgba(0, 0, 0, 0.15),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.6),
    inset 0 -1rpx 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16rpx);
  -webkit-backdrop-filter: blur(16rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  font-size: 32rpx;
}

.control-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.control-btn:active {
  transform: scale(0.92);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
  box-shadow: 
    0 4rpx 16rpx rgba(0, 0, 0, 0.2),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.4),
    inset 0 -1rpx 0 rgba(255, 255, 255, 0.05);
}

.control-btn:active::before {
  opacity: 1;
}

.control-icon {
  font-size: 42rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 0.8);
  text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 1;
}

/* 顶部信息面板样式 - 液态玻璃效果 */
.top-info-panel {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  right: 20rpx;
  z-index: 20;
  animation: slideDown 0.3s ease-out;
  background: #ffffff38;
    border-radius: 24rpx;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-content {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx);
  border-radius: 36rpx;
  padding: 24rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8rpx 32rpx rgba(0, 0, 0, 0.1),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.4),
    inset 0 -1rpx 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.panel-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent);
  pointer-events: none;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.panel-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
}

.panel-close {
  font-size: 36rpx;
  color: rgba(51, 51, 51, 0.8);
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
}

.panel-close:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.92);
}

.panel-body {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  position: relative;
  z-index: 1;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 8rpx 0;
}

.info-icon {
  width: 24rpx;
  height: 24rpx;
  min-width: 24rpx;
  margin-top: 2rpx;
  position: relative;
}

.location-icon {
  background: linear-gradient(135deg, rgba(51, 51, 51, 0.8), rgba(102, 102, 102, 0.6));
  border-radius: 50%;
  position: relative;
}

.location-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8rpx;
  height: 8rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}

.description-icon {
  background: linear-gradient(135deg, rgba(51, 51, 51, 0.8), rgba(102, 102, 102, 0.6));
  border-radius: 4rpx;
  position: relative;
}

.description-icon::before {
  content: '';
  position: absolute;
  top: 6rpx;
  left: 4rpx;
  right: 4rpx;
  height: 2rpx;
  background: rgba(255, 255, 255, 0.9);
}

.description-icon::after {
  content: '';
  position: absolute;
  top: 12rpx;
  left: 4rpx;
  right: 4rpx;
  height: 2rpx;
  background: rgba(255, 255, 255, 0.9);
}

.phone-icon {
  background: linear-gradient(135deg, rgba(51, 51, 51, 0.8), rgba(102, 102, 102, 0.6));
  border-radius: 6rpx;
  position: relative;
}

.phone-icon::before {
  content: '';
  position: absolute;
  top: 4rpx;
  left: 6rpx;
  right: 6rpx;
  bottom: 4rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.9);
  border-radius: 4rpx;
}

.phone-icon::after {
  content: '';
  position: absolute;
  top: 8rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 8rpx;
  height: 2rpx;
  background: rgba(255, 255, 255, 0.9);
}

.info-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  line-height: 1.4;
  text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
}

/* 导航按钮区域 */
.navigation-section {
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;

}

.nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 48rpx;
  height: 80rpx;
  background-color: #42CF7F;
  color: white;
  border-radius: 32rpx;
  font-size: 32rpx;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  min-width: 160rpx;
  text-align: center;
  border-radius: 24rpx;
  box-sizing: border-box;
}

.nav-button:active {
  transform: scale(0.95);
  background: rgba(0, 122, 255, 0.95);
  box-shadow: 
    0 4rpx 16rpx 0 rgba(0, 122, 255, 0.5),
    0 2rpx 8rpx 0 rgba(0, 122, 255, 0.3),
    inset 0 1rpx 2rpx 0 rgba(255, 255, 255, 0.4);
}

.nav-text {
  font-size: 32rpx;
  font-weight: 600;
  color: white;
}

/* 自定义顶部导航栏样式 */




.nav-text {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
}


  /* 标记点过渡动画 */
  .marker-transition {
    transition: all 0.3s ease-in-out;
  }
</style>